<template>
	<view class="sure_order">
		<view class="shop_top">
			<image class="s_img" :src="info.image" mode=""></image>
			<view class="right_box">
				<view class="name">{{info.name}}</view>
			</view>
		</view>
		<image class="line_img" src="../../static/images/line.png" mode=""></image>
		<view class="select_shop">
			<view class="select_shop_top" @tap="showPicker('selector')">
				<view class="type">选择兑换的商品</view>
				<image class="r_img" src="/static/images/logo.jpg" mode=""></image>
			</view>
		</view>
		<view class="shop_top">
			<image class="s_img" src="/static/images/logo1.png" mode=""></image>
			<view class="right_box">
				<view class="name">{{shopName}}</view>
				<view class="num_box">
					<text class="jian" @click="add(1)">－</text>
					<text class="num">{{num}}</text>
					<text class="jia" @click="add(2)">＋</text>
				</view>
			</view>
		</view>
		<view class="select_shop">
			<view class="select_shop_top">
				<view class="type">需支付积分</view>
			</view>
			<view class="score">
				<view class="tit">需支付</view>
				<view class="jifen">{{allScore}}</view>
			</view>
		</view>
		<view class="pay_type">
			<view class="tit">选择支付方式</view>
			<view class="pay">
				<view class="pay_left">
					<image class="p_img" src="../../static/images/balance.png" mode=""></image>
					<view>活力积分支付</view>
				</view>
				<label class="radio">
					<radio value="r1" color="#ec5410" checked="true" style="transform: scale(.7);"/>
				</label>
			</view>
		</view>
		<view class="btn" @click="showp()">立即购买</view>
		<w-picker mode="selector" :options="shopList" @confirm="onConfirm($event,'selector')" ref="selector"></w-picker>
		<view class="layer_box_pass" v-show="ispLayer">
			<view class='lay_tit' >
				<view class="title1" >
					<view>支付方式</view>
					<view @click="closep">关闭</view>
				</view>
				<view class="title">
					<input v-model="pass" type="password" style="width:100%;height: 90rpx;background: #cccccc;padding: 20rpx;">
				</view>
				<view class="title2" >
					<view style="width:100%;" @click="surepass">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	export default {
		components:{
			wPicker
		},
		data() {
			return {
				num:1,
				score:12,
				allScore:'',
				shopList:[
					{'label': '桶装水','value': 1},{'label': '啤酒','value': 2},{'label': '饮料','value': 3}
				],
				shopName:'桶装水',
				id:0,
				goodid:0,
				info:[],
				userinfo:[],
				ispLayer:false,
				pass:'',
			}
		},
		onLoad(options) {
			this.userinfo=uni.getStorageSync('user');
			this.id=options.id;
			this.getinfo();
		},
		onShow() {
			
		},
		methods: {
			getinfo(){
				var that=this;
				this.$http.get('/tyshop/shopnewdetail',{
					id:that.id
				}).then(function (response) {
					that.info=response.data;
					that.shopList=response.data.child;
					var temgood=that.shopList[0];
					that.goodid=temgood.value;
					var tem=temgood.label.split('-');
					that.shopName = tem[0];
					that.score = tem[1];
					that.allScore = that.num * that.score;
				}).catch(function (error) {
					console.log(error);
				});
				
			},
			showp(){
				this.ispLayer=true;
			},
			closep(){
				this.ispLayer=false;
			},
			surepass(){
				if(this.pass==''||this.pass==null||this.pass==undefined){
					uni.showToast({
						icon:'none',
						title:'请输入密码'
					})
					return;
				}
				var that=this;
				this.$http.get('/user/erjipass',{'user_id':this.userinfo.user_id,'pass':this.pass}).
				then(function (response) {
					if(response.code==-1){
						uni.showToast({
							icon:'none',
							title:response.msg
						})
						return;
					}else{
						that.buy();
						
					}
				}).catch(function (error) {
					console.log(error);
				});
			},
			// 立即购买
			buy:function(){
				this.ispLayer=false;
				//活力积分
				var userallmoney=parseFloat(this.userinfo.user_balance);
				userallmoney = Math.round((userallmoney + Number.EPSILON) * 100) / 100;
				if(userallmoney<parseFloat(this.allScore)){
					uni.showToast({
						icon:'none',
						title:'活力积分不足'
					})
					return;
				}
				var title='本次支付活力积分：'+this.allScore;
				var that=this;
				uni.showModal({
				    title: '提示',
				    content: title,
				    success: function (res) {
				        if (res.confirm) {
							that.$http.get('/tyshop/addshopzt',{'user_id':that.userinfo.user_id,'id':that.id,'goodid':that.goodid,'num':that.num,'allScore':that.allScore}).
							then(function (response) {
								uni.showToast({
									icon:'none',
									title:response.msg
								})
								return;
							}).catch(function (error) {
								console.log(error);
							});
				        }
				    }
				});
			},
			// 1减 2加
			add:function(n){
				if(n == 1){
					if(this.num == 1){
						uni.showToast({
							icon:'none',
							title:'不能再少了'
						})
					}else{
						this.num--
					}
				}else{
					this.num++
				}
				this.allScore = this.num * this.score;
			},
			// 选择商品
			showPicker(type) {
				this.$refs[type].show();
			},
			onConfirm(res, type) {
				switch (type) {
					case "selector":
						this.goodid=res.value;
						var tem=res.result.split('-');
						this.shopName = tem[0];
						this.score = tem[1];
						this.allScore = this.num * this.score;
						break;
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.sure_order{
		width: 100%;
		.btn{
			position: fixed;
			bottom: 50rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 690rpx;
			background: #6686f5;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 48rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
		}
		.pay_type{
			border-top: 1px solid #e5e5e5;
			.pay{
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.pay_left{
					display: flex;
					align-items: center;
					color: #333;
					font-size: 28rpx;
					.p_img{
						width: 74rpx;
						height: 74rpx;
					}
				}
			}
			.tit{
				padding: 30rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
		.select_shop{
			padding: 20rpx 30rpx 0;
			.score{
				padding: 30rpx 0;
				text-align: center;
				.tit{
					color: #333;
					font-size: 32rpx;
					line-height: 40rpx;
				}
				.jifen{
					color: #ec5410;
					font-size: 40rpx;
				}
			}
			.select_shop_top{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.r_img{
					width: 36rpx;
					height: 36rpx;
				}
				.type{
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}
		.line_img{
			width: 100%;
			height: 10rpx;
		}
		.shop_top{
			padding: 30rpx 30rpx 10rpx;
			display: flex;
			.right_box{
				flex: 1;
				margin-left: 20rpx;
				position: relative;
				.num_box{
					position: absolute;
					bottom: 0;
					right: 0;
					border: 1px solid #e5e5e5;
					border-radius: 24rpx;
					height: 48rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;
					.jian{
						width: 40rpx;
						text-align: center;
						padding: 0 14rpx;
					}
					.num{
						border-left: 1px solid #e5e5e5;
						border-right: 1px solid #e5e5e5;
						width: 40rpx;
						text-align: center;
						padding: 0 14rpx;
					}
					.jia{
						width: 40rpx;
						text-align: center;
						padding: 0 14rpx;
					}
				}
				.name{
					font-size: 32rpx;
					color: #333;
					font-weight: bold;
				}
			}
			.s_img{
				width: 154rpx;
				height: 154rpx;
			}
		}
	}
.layer_box_pass{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	.lay_tit{
		width: 80%;
		height: 350rpx;
		background: #ffffff;
		position: fixed;
		bottom: 50%;
		border-radius: 10rpx;
		.title{
			display: flex;
			flex-wrap: nowrap;
			height:130rpx;
			line-height: 130rpx;
			font-size: 35rpx;
			.coin{
				margin: auto 0;
				width:100rpx;
				height:100rpx;
			}
		}
		.title1{
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx;
			border-bottom: 2px solid #988f8f;
		}
		.title2{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			text-align: center;
		}
	}
	.lay_tit1{
		height: 400rpx;
	}
}
</style>
